<template>
	<view>
		<uni-card>
			<uni-list-item showArrow :border="false" direction="column" :clickable="true" @click="storeClick"
				to="./store.vue">
				<template v-slot:header>
					<view class="store-header">
						<view class="store-pic">
							<image class="store-image" :src="storeInfo.logo"></image>
						</view>
						<view class="store-info">
							<text class="black-color store-name">{{storeInfo.name}}</text>
							<view class="store-tag">
								<text class="tag" v-if="storeInfo.bread_type">烘焙</text>
								<text class="tag" v-if="storeInfo.drink_type">饮品</text>
								<text class="tag" v-if="storeInfo.meal_type">简餐</text>
							</view>
						</view>
					</view>
				</template>
				<!-- <template v-slot:body>
					<view>
						<uni-icons type="location" size="20"></uni-icons>
						<text class="middle">{{storeInfo.address}}</text>
					</view>
					<view>
						<uni-icons type="phone" size="20"></uni-icons>
						<text class="middle">{{storeInfo.tel}}</text>
					</view>
				</template> -->
			</uni-list-item>

		</uni-card>

		<view class="good">
			<uni-card>
				<template v-slot:title>
					<view class="card-top">
						<text class="title">商品信息</text>
						<text class="edit-btn" @click="goodAdd" v-if="!good_add">添加商品</text>
					</view>
				</template>
				<!-- 添加商品 -->
				<view class="good-detail" v-if="good_add">
					<view class="item-list-last">
						<text class="item-index">添加商品</text>
						<view>
							<text class="exit-btn" @click="goodAddExit()">退出</text>
							<text class="update-btn" @click="goodUpdateAdd()">保存</text>
						</view>
					</view>
					<view class="item-list">
						<text>商品图标</text>
						<image class="img" :src="goodInfoAdd.logo"></image>
					</view>
					<view class="item-list">
						<text class="item-left">商品名称</text>
						<uni-easyinput class="item-input" placeholder="请输入商品名称"
							v-model="goodInfoAdd.name"></uni-easyinput>
					</view>
					<view class="item-list">
						<text class="item-left">商品价格</text>
						<uni-easyinput class="item-input" placeholder="请输入商品价格" v-model="goodInfoAdd.price"
							type="digit"></uni-easyinput>
					</view>
					<view class="item-list">
						<text class="item-left">取袋时间</text>
						<view class="time-picker">
							<view class="time-start">
								<picker mode="time" :value="goodInfoAdd.start_time" @change="startTimeChangeAdd()">
									<view>{{goodInfoAdd.start_time}}</view>
								</picker>
							</view>
							<view>—</view>
							<view class="time-end">
								<picker mode="time" :value="goodInfoAdd.end_time" @change="endTimeChangeAdd()">
									<view>{{goodInfoAdd.end_time}}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="item-list">
						<text class="item-left">商品总数</text>
						<uni-easyinput class="item-input" placeholder="请输入商品总数" v-model="goodInfoAdd.all_num"
							type="number"></uni-easyinput>
					</view>
				</view>
				<!-- 商品显示 -->
				<view class="good-detail" v-for="(item,index) in goodInfo" v-if="!good_modify[index]">
					<view class="item-list-last">
						<text class="item-index">商品{{index+1}}</text>
						<text class="edit-btn" @click="goodEdit($event,index)">编辑</text>
					</view>
					<view class="item-list">
						<text>商品图标</text>
						<image class="img" :src="item.logo==''?'../../static/default_img.png':item.logo"></image>
					</view>
					<view class="item-list">
						<text class="item-left">商品名称</text>
						<text class="item-right">{{item.name}}</text>
					</view>
					<view class="item-list">
						<text class="item-left">商品价格</text>
						<text class="item-right">{{item.price}}</text>
					</view>
					<view class="item-list">
						<text class="item-left">取袋时间</text>
						<text class="item-right">{{item.start_time}}—{{item.end_time}}</text>
					</view>
					<view class="item-list">
						<text class="item-left">商品总数</text>
						<text class="item-right">{{item.all_num}}</text>
					</view>
					<!-- <view class="item-list">
						<text class="item-left">今日已售</text>
						<text class="item-right">{{item.sale_num}}</text>
					</view>
					<view class="item-list-last">
						<text class="item-left">剩余数量</text>
						<text class="item-right">{{item.all_num-item.sale_num}}</text>
					</view> -->
				</view>
				<!-- 商品编辑 -->
				<view class="good-detail" v-for="(item,index) in goodInfoEdit" v-if="good_modify[index]">
					<view class="item-list-last">
						<text class="item-index">商品{{index+1}}</text>
						<view>
							<text class="exit-btn" @click="goodExit($event,index)">退出</text>
							<text class="update-btn" @click="goodUpdate($event,index)">保存</text>
						</view>
					</view>
					<view class="item-list">
						<text>商品图标</text>
						<image class="img" :src="item.logo==''?'../../static/default_img.png':item.logo"></image>
					</view>
					<view class="item-list">
						<text class="item-left">商品名称</text>
						<uni-easyinput class="item-input" placeholder="请输入商品名称" v-model="item.name"></uni-easyinput>
					</view>
					<view class="item-list">
						<text class="item-left">商品价格</text>
						<uni-easyinput class="item-input" placeholder="请输入商品价格" v-model="item.price"
							type="digit"></uni-easyinput>
					</view>
					<view class="item-list">
						<text class="item-left">取袋时间</text>
						<view class="time-picker">
							<view class="time-start">
								<picker mode="time" :value="item.start_time" @change="startTimeChange($event,index)">
									<view>{{item.start_time}}</view>
								</picker>
							</view>
							<view>—</view>
							<view class="time-end">
								<picker mode="time" :value="item.end_time" @change="endTimeChange($event,index)">
									<view>{{item.end_time}}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="item-list">
						<text class="item-left">商品总数</text>
						<uni-easyinput class="item-input" placeholder="请输入商品总数" v-model="item.all_num"
							type="number"></uni-easyinput>
					</view>
					<!-- <view class="item-list">
						<text class="item-left">今日已售</text>
						<uni-easyinput class="item-input" v-model="item.sale_num" disabled></uni-easyinput>
					</view>
					<view class="item-list-last">
						<text class="item-left">剩余数量</text>
						<uni-easyinput class="item-input" v-model="item.all_num-item.sale_num" disabled></uni-easyinput>
					</view> -->
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchantId: '',
				storeInfo: '',
				goodInfo: '',
				goodInfoEdit: '',
				good_modify: [],
				goodInfoDefault: {
					_id: '',
					store_id: '',
					logo: '',
					name: '',
					price: '',
					all_num: '',
					sale_num: 0,
					start_time: '21:00',
					end_time: '22:00',
				},
				goodInfoAdd: '',
				good_add: false,
			}
		},
		onShow() {
			// this.storeInfo = '';
			this.merchantId = uni.getStorageSync('merchantId');
			uniCloud.callFunction({
					name: 'getStore',
					data: {
						"merchant_id": this.merchantId,
					}
				})
				.then(res => {
					this.storeInfo = res.result.data[0];
					this.getGoodData();
					uni.setStorageSync('storeId', res.result.data[0]._id);
				});
		},
		methods: {
			getStoreData() {
				uniCloud.callFunction({
						name: 'getStore',
						data: {
							"merchant_id": this.merchantId,
						}
					})
					.then(res => {
						this.storeInfo = res.result.data[0];
					});
			},
			getGoodData() {
				uniCloud.callFunction({
						name: 'getGood',
						data: {
							"store_id": this.storeInfo._id,
						}
					})
					.then(res => {
						this.goodInfo = res.result.data;
						let len = res.result.data.length;
						for (var i = 0; i < len; i++) {
							//v-if绑定数组定义、修改时要用set
							this.$set(this.good_modify, i, false);
						}
					});
			},
			storeClick() {
				uni.navigateTo({
					url: '/pages/index/store'
				})
			},
			goodEdit(e, index) {
				//v-if绑定数组定义、修改时要用set
				this.$set(this.good_modify, index, true);
				this.goodInfoEdit = JSON.parse(JSON.stringify(this.goodInfo));
			},
			goodExit(e, index) {
				this.$set(this.good_modify, index, false);
			},
			goodUpdate(e, index) {
				let item = this.goodInfoEdit[index];
				uniCloud.callFunction({
						name: 'updateGood',
						data: {
							"_id": item._id,
							"logo": item.logo,
							"name": item.name,
							"all_num": item.all_num,
							"price": item.price,
							"end_time": item.end_time,
							"start_time": item.start_time,
						}
					})
					.then(res => {
						if (res.result.updated == 1) {
							this.goodInfo = JSON.parse(JSON.stringify(this.goodInfoEdit));
							uni.showToast({
								title: "保存成功",
								icon: 'none'
							});
							this.$set(this.good_modify, index, false);
							this.getGoodData();
						} else {
							uni.showToast({
								title: "保存失败，请重试",
								icon: 'none'
							});
						}
					});
			},
			startTimeChange(e, index) {
				this.goodInfo[index].start_time = e.detail.value;
			},
			endTimeChange(e, index) {
				this.goodInfo[index].end_time = e.detail.value;
			},
			goodAdd() {
				this.good_add = true;
				this.goodInfoAdd = this.goodInfoDefault;
			},
			goodAddExit() {
				this.good_add = false;
			},
			goodUpdateAdd() {
				let item = this.goodInfoAdd;
				uniCloud.callFunction({
						name: 'addGood',
						data: {
							"store_id": this.storeInfo._id,
							"logo": item.logo,
							"name": item.name,
							"price": item.price,
							"end_time": item.end_time,
							"start_time": item.start_time,
							"all_num": item.all_num,
							"sale_num": 0,
						}
					})
					.then(res => {
						console.log(res);
						if (res.result.id) {
							this.goodInfo = JSON.parse(JSON.stringify(this.goodInfoEdit));
							uni.showToast({
								title: "添加成功",
								icon: 'none'
							});
							this.good_add = false;
							this.getGoodData();
						} else {
							uni.showToast({
								title: "添加失败，请重试",
								icon: 'none'
							});
						}

					});
			},
			startTimeChangeAdd(e) {
				this.goodInfoAdd.start_time = e.detail.value;
			},
			endTimeChangeAdd(e) {
				this.goodInfoAdd.end_time = e.detail.value;
			},
		}
	}
</script>

<style>
	.small {
		font-size: 20rpx;
	}

	.middle {
		font-size: 25rpx;
	}

	.big {
		font-size: 30rpx;
	}

	.bold {
		font-weight: bold;
	}

	.green-color {
		color: #296844;
	}

	.black-color {
		color: black;
	}

	.red-color {
		color: brown;
	}

	.store-header {
		display: flex;
		direction: row;
	}

	.store-image {
		display: block;
		margin: 0 auto;
		width: 60px;
		height: 60px;
		border-radius: 5px;
		margin-right: 30rpx;
	}

	.store-name {
		font-size: 35rpx;
		font-weight: bold;
	}

	.store-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.store-tag {
		display: flex;
		flex-direction: row;
		margin: 15rpx 0;
	}

	.tag {
		width: 80rpx;
		height: 35rpx;
		border: 1px solid #296844;
		border-radius: 20rpx;
		font-size: 22rpx;
		color: #296844;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15rpx;
	}


	.edit-btn {
		color: gray;
		font-size: 30rpx;
	}

	.update-btn {
		color: #2979ff;
		font-size: 30rpx;
	}

	.exit-btn {
		color: #2979ff;
		font-size: 30rpx;
		margin-right: 20rpx;
	}

	.img {
		width: 90rpx;
		height: 90rpx;
	}

	.card-top {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 30rpx 20rpx 10rpx 20rpx;
	}

	.title {
		font-size: 35rpx;
		font-weight: bold;
	}

	.store-detail {
		font-size: 30rpx;
		color: black;
		display: flex;
		flex-direction: column;
		padding-top: 10rpx;
		border-top: 1px solid #bfbfbf;
	}

	.item-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 0.5px solid #dfdfdf;
	}

	.item-list-last {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
	}

	.item-index {
		font-weight: bold;
	}

	.item-left {
		flex: 3;
	}

	.item-right {
		flex: 7;
		word-break: keep-all;
		display: flex;
		justify-content: flex-end;
	}

	.item-input {
		flex: 7;
	}

	.store-tags {
		display: flex;
		flex-direction: row;
	}

	.store-tag {
		margin-left: 10rpx;
	}

	.tag-checkbox {
		display: flex;
		flex-direction: row;
	}

	.good-detail {
		font-size: 30rpx;
		color: black;
		display: flex;
		flex-direction: column;
		padding: 0rpx 0;
		border-top: 1px solid #bfbfbf;
	}

	.time-picker {
		flex: 7;
		word-break: keep-all;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.time-start {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		height: 35px;
		width: 40%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;
	}

	.time-end {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		height: 35px;
		width: 40%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15rpx;
	}
</style>